<template>
  <div class="test">
    <CTable :columns="columns" v-bind="tabConfig" />
  </div>
</template>

<script>
import Cpn from "./mycon.vue";
export default {
  data() {
    return {
      columns: [
        {
          type: "selection",
          width: "100",
        },
        {
          label: "姓名-like",
          prop: "name",
          fliterConfig: {
            filterType: "Input",
            operate: "like",
          },
        },
        {
          label: "日期-单选-等于",
          prop: "date",
          render: (h, { row }) => {
            return <el-button>{row.date}</el-button>;
          },
        },
        {
          label: "地址-eq",
          prop: "address",
          fliterConfig: {
            filterType: "Input",
            operate: "eq",
          },
        },
        {
          label: "系统顺序",
          prop: "indey",
          sortable: "custom",
        },
        {
          label: "随机大小",
          prop: "indez",
          sortable: "custom",
        },
        {
          label: "操作",
          showCol: true,
          render: (h) => {
            return (
              <div>
                <el-button>111</el-button>
              </div>
            );
          },
        },
      ],
      // columns: [
      //   {
      //     type: "index",
      //     width: "100",
      //   },
      //   {
      //     label: "日期-时间范围",
      //     prop: "date",
      //     width: "220",
      //     fliterConfig: {
      //       filterType: "DatePicker",
      //       operate: "in",
      //       "value-format": "yyyy-MM-dd",
      //       conditionFormatBefore: (conditions, key, value) => {
      //         conditions = conditions.filter((cod) => cod.key !== key);
      //         const hasValue = Array.isArray(value) ? value.length : value;
      //         if (hasValue) {
      //           conditions.push({ key, op: "gt", value: value[0] });
      //           conditions.push({ key, op: "lt", value: value[1] });
      //         }
      //         return conditions;
      //       },
      //     },
      //   },
      //   {
      //     label: "日期-单选-等于",
      //     prop: "date",
      //     width: "220",
      //     fliterConfig: {
      //       filterType: "Select",
      //       operate: "eq",
      //       options: [
      //         {
      //           label: "2016-05-02",
      //           value: "2016-05-02",
      //         },
      //         {
      //           label: "2099-01-03",
      //           value: "2099-01-03",
      //         },
      //       ],
      //     },
      //     render: (h, { row }) => {
      //       return <el-button>{row.date}</el-button>;
      //     },
      //   },
      //   {
      //     label: "姓名-like",
      //     prop: "name",
      //     fliterConfig: {
      //       filterType: "Input",
      //       operate: "like",
      //     },
      //   },
      //   {
      //     label: "地址-start_with",
      //     prop: "address",
      //     fliterConfig: {
      //       filterType: "Input",
      //       operate: "start_with",
      //     },
      //     "show-overflow-tooltip": true,
      //   },
      //   {
      //     label: "地址-end_with",
      //     prop: "address",
      //     fliterConfig: {
      //       filterType: "Input",
      //       operate: "end_with",
      //     },
      //   },
      //   {
      //     label: "系统顺序",
      //     prop: "indey",
      //     sortable: "custom",
      //   },
      //   {
      //     label: "随机大小",
      //     prop: "indez",
      //     sortable: "custom",
      //   },
      //   {
      //     label: "操作",
      //     width: "300",
      //     render: (h) => {
      //       return (
      //         <div>
      //           <el-button>111</el-button>
      //           <el-button>222</el-button>
      //           <el-button>333</el-button>
      //         </div>
      //       );
      //     },
      //   },
      // ],
      tabConfig: {
        rowKey: "indey",
        url: "/user/info",
        params: {
          pageSize: 5,
          pageNum: 1,
        },
      },
    };
  },
  mounted() {},
  methods: {},
};
</script>

<style scoped lang="less">
.test {
  width: 100%;
  height: 100%;
}
.caret-wrapper {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  height: 34px;
  width: 24px;
  vertical-align: middle;
  cursor: pointer;
  overflow: initial;
  position: relative;
}
.sort-caret {
  width: 0;
  height: 0;
  border: solid 5px transparent;
  position: absolute;
  left: 7px;

  &.ascending {
    border-bottom-color: #ccc;
    top: 5px;
  }

  &.descending {
    border-top-color: #eee;
    bottom: 7px;
  }
}
</style>
